<template>
  <el-menu
    class="el-menu-vertical-demo"
    background-color="#324057"
    text-color="#fff"
    active-text-color="#ffd04b"
    default-active="welcome"
    router
  >
    <!-- 首页 -->
    <div class="title">食验室后台管理系统</div>
    <el-menu-item index="welcome">
      <i class="el-icon-menu"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <!-- 一级菜单 -->
    <el-submenu index="order">
      <!-- 一级菜单模板区域 -->
      <template slot="title">
        <!-- 图标 -->
        <i class="el-icon-tickets"></i>
        <!-- 文本 -->
        <span>订单管理</span>
      </template>
      <el-menu-item index="orders">订单列表</el-menu-item>
    </el-submenu>
    <el-submenu index="foods">
      <template slot="title">
        <i class="el-icon-goods"></i>
        <span>商品管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="foods">商品列表</el-menu-item>
        <el-menu-item index="addfoods">添加商品</el-menu-item>
        <el-menu-item index="category">分类列表</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="user">
      <template slot="title">
        <i class="el-icon-user"></i>
        <span>会员管理</span>
      </template>
      <el-menu-item index="members">会员列表</el-menu-item>
    </el-submenu>
  </el-menu>
</template>


<style lang="less" scoped>
.title {
  padding: 15px;
  text-align: center;
  background: #ffc65a;
  font-size: 18px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
.el-menu {
  height: 100%;
  width: 200px;
}

</style>